<template>
	<view class="page-container">
		<use-navbar ref="navbar" type="custom" :back="false" :bg-color="navbarBgcolor" :title="''">
			<template v-slot:title>
				<view class="tac">
					<text class="fs-34 fwbd ft-white">事项</text>
				</view>
			</template>
			<template v-slot:right>
				<view class="tac trophy" @click='toTrophy'>
					<image src="../../static/icons/icon-trophy.png" class="icon"></image>
				</view>
			</template>
		</use-navbar>
		<web-view style="position: fixed;top:0;left: 0;width: 100vw;height: 100vh;" :src="unityWebUrl" full-screen
			ref="unityWindows"></web-view>
	</view>
	<!-- 普通弹窗 -->
	<movable-area
		style="height: 90vh; width: 100%;position: fixed;top:50px;left: 0;bottom:60px ;pointer-events: none;z-index: 95;">
		<movable-view :x="screen.x" :y="screen.y" direction="all"
			style="width: 45vw; height: 55px;pointer-events: auto;">
			<view class="button-3d" @click="fabClick('new')" style="width: 45vw;">
				<span class="button-3d-shadow"></span>
				<span class="button-3d-edge"></span>
				<span class="button-3d-front text tac">记一笔</span>
			</view>
		</movable-view>
	</movable-area>
	<use-tabbar></use-tabbar>
</template>

<script setup>
	// --组合式 API 模板
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue'

	import {
		storeToRefs
	} from 'pinia';
	import {
		useUserStore
	} from '@/store'
	import {
		onLoad,
		onShow,
		onBackPress
	} from "@dcloudio/uni-app";
	const {
		ctx,
		proxy
	} = getCurrentInstance();
	console.log("ctx", ctx);
	console.log("proxy", proxy.$config);
	let UserStore = useUserStore();

	const navbarBgcolor = ref('#46a7f1')
	// Vue与	WebGl通信
	const unityWindows = ref(null);

	const unityWebUrl = ref('https://mcda.youerp.cn/web/WebGl/index/index.html')
	onLoad((option) => {
		console.log("B 页面 onLoad:", option);
		// unityWebUrl.value='http://localhost:8039/WebGl/index/index.html?v=1.0.0'
		uni.hideTabBar();
		addEventListener();
	});

	onShow(() => {
		console.log("B 页面 onShow");
	});

	const onClick = (type) => {
		console.log('点击类型：', unityWindows.value, unityWindows.value.contentWindow);
		unityWindows.value.contentWindow.sendUnityEvent("Item", "ChangeTextColor");
	}
	const addEventListener = () => {
		console.log("addEventListener");
		// uni.$on('message', function(res) {
		// 	console.log("接收到的数据：", res.data);
		// 	if (res.data.status == "loading") {
		// 		console.log("Unity场景加载完成");
		// 	}
		// 	if (res.data.status == "click") {
		// 		console.log("跳转详情页面");
		// 		uni.redirectTo({
		// 			url: `/pages/matter/detail?id=123456`
		// 		});
		// 	}
		// })

		window.addEventListener('message', (res) => {
			console.log("接收到的数据：", res.data);
			if (res.data.status == "loading") {
				console.log("Unity场景加载完成");
			}
			if (res.data.status == "input") {
				unityInput.value = res.data.data || null;
			}
		}, false);
	}

	const backHome = () => {
		uni.navigateTo({
			url: '/pages/tabbar/launch'
		});
	}
	const gotoSearch = function() {
		uni.navigateTo({
			url: `/pages/search/search?type=` + tabState.value.list[
				tabState.current] + `&title=事项查询`
		});
	}
	const goToPage = async function(type, item) {
		if (!item.url) {
			return;
		}
		uni.navigateTo({
			url: item.url
		});
	}
	const toMessage = () => {
		uni.navigateTo({
			url: '/pages/tabbar/message'
		});
	}
	const fabClick = (type) => {
		setTimeout(() => {
			uni.navigateTo({
				url: `/pages/matter/new?id=&type=${type}`
			});
		}, 350)
	}

	// -检测用户缓存的登录信息
	const checkLoginState = async () => {
		return true;
		if (!UserStore.islogin) {
			proxy.$utils.timerout(() => {
				proxy.$utils.alert('请先登录系统~', function(bool) {

				}, false)
			}, 150)
			return false;
		} else {
			if (!UserStore.member.member_weixin) {
				proxy.$utils.timerout(() => {
					showAuthorize.value = true;
				}, 150)
				return false;
			}
			proxy.$utils.timerout(() => {
				showAuthorize.value = false;
			}, 250)
			return true;
		}
	}
	const screen = computed(() => {
		return {
			x: UserStore.systemInfo.screenWidth - 210,
			y: UserStore.systemInfo.screenHeight - 180
		}
	})
	onMounted(() => {
		console.log(new Date())
		console.log(screen)
	})
</script>

<style lang="scss">
	page,
	.page-container {
		min-height: 100vh;
		background: $uni-bg-color-grey;
	}

	.content {
		height: 100%;
		position: relative;
	}

	.matterType {
		padding: 16px 0 26px 0;

		.item {
			width: 25%;

			image {
				width: 48px;
				height: 48px;
			}

			text {
				line-height: 1;
				font-size: 14px;
				color: #999;
				margin-top: 6px;
			}
		}
	}

	.area {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		pointer-events: none;
	}

	.area .view {
		width: auto;
		height: auto;
		pointer-events: auto;
	}

	.area .view .icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		box-shadow: 1px 2px 4px 2px rgba(0, 0, 0, 0.25);
		background-color: rgba(255, 255, 255, 0.9);
	}

	.area .view image {
		width: 100%;
		height: 100%;
	}

	.triangle-popup {
		overflow: visible;
		background-color: rgba(38, 38, 38, 1.0);

		&:before {
			right: 12px;
			bottom: auto;
			position: absolute;
			top: -15px;
			width: 0;
			height: 0;
			border: 8px solid;
			content: '';
			border-color: transparent transparent rgba(52, 52, 52, 1.0) transparent;
		}
	}

	.box-shadow {
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
	}

	.uni-list-item {
		border-bottom: 1px solid #e5e5e5;
	}

	.grid-item {
		display: flex;
		align-items: center;
		justify-content: center;
		border: solid #ccc 1px;
		background-color: #ccc;
	}
</style>